/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    BlobInputList,
    CCell,
    Cell,
    Input,
    InputLine,
    LineColumn,
    RCell,
    Select,
    SuffixInput,
    Table,
    TableBody,
    TableRow,
    Text,
} from "customize-easy-ui-component";
import {CCellUnit, InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {usePrefixDataTable} from "../../hook/usePrefixData";
import {config设备概况} from "./orcBase";

export const itemA下结论=['检验结论','检验日期','检验日期1','新下检日','结论说明','参检人员','问处结果','许压力','许温度','许介质','许其它','检方法'];
/**通用见证材料3项的： 约定：children [] 可以嵌入俩个儿子DOM节点，分别代表两个段落插入一个div块;
 * 【特殊的】"result":"允许使用,降压使用,进行合于使用评价,停止使用",
 * */
export const ConclusionLdis=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA下结论,);
        const {inp, setInp} = useItemInputControl({ ref });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            检验方法:
            <BlobInputList value={inp?.检方法 || ''} rows={3} datalist={['外腐蚀外检测']}
                           onListChange={v => setInp({...inp, 检方法: v || undefined}) } />
            问题与处理:<br/>
            [说明检验评价中发现的问题及其处理(必要时附图或者附页)]
            <BlobInputList  value={inp?.问处结果 ||''} rows={7} datalist={['详见定期检验报告综述']}
                            onListChange={v => setInp({ ...inp, 问处结果: v || undefined}) } />
            允许（监控）工作条件:
            <LineColumn>
                <InputLine label={`压力：`}>
                    <SuffixInput  value={inp?.许压力 ||''}  onSave={txt=> setInp( { ...inp, 许压力: Number(txt) || undefined})}
                            >MPa</SuffixInput>
                </InputLine>
                <InputLine label={`温度：`}>
                    <SuffixInput  value={inp?.许温度 ||''}  onSave={txt=> setInp( { ...inp, 许温度: Number(txt) || undefined})}
                            >℃</SuffixInput>
                </InputLine>
                <InputLine  label='介质：' >
                    <Input  value={inp?.许介质 ||''}
                            onChange={e => setInp({ ...inp, 许介质: e.currentTarget.value}) } />
                </InputLine>
                <InputLine  label='其它：' >
                    <Input  value={inp?.许其它 ||''}
                            onChange={e => setInp({ ...inp, 许其它: e.currentTarget.value}) } />
                </InputLine>
            </LineColumn>
            <InputLine label='参检人员：'>
                <BlobInputList value={inp?.参检人员 || ''} rows={2}
                               onListChange={v => setInp({...inp, 参检人员: v || undefined}) } />
            </InputLine>
            <Text variant="h5">检验结论-检查结论{'>>'}</Text>
            <InputLine  label='检验结论' >
                <Select inputSize="md" css={{minWidth: '140px', fontSize: '1.3rem', padding: '0 1rem'}}
                        value={inp?.检验结论 || ''}
                        onChange={e => setInp({...inp, 检验结论: e.currentTarget.value || undefined})}>
                    <option></option>
                    <option>允许使用</option>
                    <option>降压使用</option>
                    <option>进行合于使用评价</option>
                    <option>停止使用</option>
                </Select>
            </InputLine>
            结论说明:
            <BlobInputList value={inp?.结论说明 || ''} rows={4}
                           onListChange={v => setInp({...inp, 结论说明: v || undefined}) } />
            <LineColumn>
                <InputLine label='设置检验日期'>
                    <Input value={inp?.检验日期 || ''} type='date'
                           onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
                </InputLine>
                <InputLine  label='检验起始日期' >
                    <Input  value={inp?.检验日期1 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 检验日期1: e.currentTarget.value}) } />
                </InputLine>
                <InputLine  label='下次定期检验日期' >
                    <Input  value={inp?.新下检日 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
                </InputLine>
            </LineColumn>
        </InspectRecordLayout>;
 });

// const config结论概况上 = config结论概况.slice(0, 14); const config结论概况下 = config结论概况.slice(14);
//整个结论报告页
export const 检验结论报告 = ({orc, rep, theme}: { orc: any, rep: any, theme: any }
) => {
    const renderUpper = usePrefixDataTable({config: config设备概况, orc, rep, slash: true});
    //const renderMiddle = usePrefixDataTable({config: config结论概况下, orc, rep, slash: true, embed: {0: <CCell rowSpan={8}>性能参数</CCell>,},});
    return <>
        <Text variant="h2" css={{textAlign: 'center', "@media print": {pageBreakBefore: 'always',},
        }}>定期检验结论报告</Text>
        <Text css={{display: 'flex', flexDirection: 'row-reverse', marginRight: '2rem'
        }}>报告编号：{rep.isp?.no}</Text>
        <Table id='Survey' fixed={ ["4%","9%", "40%", "4%", "5%", "%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Survey'}>
                    {renderUpper}
                </RepLink>
            </TableBody>
        </Table>
        <Table id='Conclusion' fixed={ ["8.5%","33%", "5%", "23%","5%", "%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Conclusion'}>
                    <TableRow>
                        <CCell>主要依据</CCell><CCell colSpan={5}>《压力管道定期检验规则——长输管道》(TSG D7003—2022)</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检验方法</CCell>
                        <Cell colSpan={5} css={{whiteSpace:'pre-wrap'}}>
                           {orc.检方法 ?? '／'}
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <CCell>问题与处理</CCell>
                        <Cell colSpan={5} css={{whiteSpace:'pre-wrap'}}>
                           {orc.问处结果 ?? '／'}
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <CCell rowSpan={4}>检验结论</CCell><CCell rowSpan={3}><Text variant="h1" css={{fontSize:'1.8rem'}}>{orc.检验结论}</Text></CCell>
                        <CCell colSpan={4}>允许（监控）工作条件</CCell>
                    </TableRow>
                    <TableRow><CCell>压力</CCell><CCellUnit unit='MPa'>{orc.许压力 ?? '／'}</CCellUnit><CCell>温度</CCell><CCellUnit unit='℃'>{orc.许温度 ?? '／'}</CCellUnit></TableRow>
                    <TableRow><CCell>介质</CCell><CCell>{orc.许介质 ?? '／'}</CCell><CCell>其它</CCell><CCell>{orc.许其它 ?? '／'}</CCell></TableRow>
                    <TableRow>
                        <RCell colSpan={3}> 下次定期检验日期：</RCell>
                        <CCell colSpan={2}>{orc.新下检日 ?? '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>说明</CCell>
                        <Cell colSpan={5} css={{whiteSpace:'pre-wrap'}}>
                            {orc.结论说明 ?? '／'}
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <CCell>检验人员</CCell>
                        <CCell colSpan={5}>{orc.参检人员}</CCell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
    </>;
};
